<template>
    <el-card class="code">
        <el-row style="margin-bottom: 20px;">
            <el-button-group style="float: left;">
                <el-button size="medium" icon="el-icon-plus" @click="addCodeType">新增类型</el-button>
                <el-button size="medium" icon="el-icon-edit" @click="updateCodeType">修改类型
                </el-button>
                <el-button size="medium" icon="el-icon-delete" type="danger" @click="deleteCodeType">删除类型</el-button>
            </el-button-group>

            <el-button-group style="float: right">
                <el-button class="ed-button ed_black-bottom" @click="addCode()"><svg-icon icon-class="add-svg"/>新增字典</el-button>
            </el-button-group>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>字典类型</span>
                    </div>
                    <el-tree :data="treeData" highlight-current :props="defaultProps" @node-click="clickCodeType"></el-tree>
                </el-card>
            </el-col>
            <el-col :span="18">
                <ApiTable :api="load" ref="table" :params="queryForm">
                    <el-table-column :show-overflow-tooltip="true" prop="label" label="字典名称"/>
                    <el-table-column :show-overflow-tooltip="true" prop="value" label="字典值" width="150px"/>
                    <el-table-column :show-overflow-tooltip="true" prop="dictType" label="字典类型"/>
                    <el-table-column :show-overflow-tooltip="true" prop="sort" label="字典排序"/>
                    <el-table-column label="操作栏" width="150px">
                        <template slot-scope="scope">
                            <el-button class="ed-table-bottom ed_black_border" @click="updateCode(scope.row)">编辑</el-button>
                            <el-button class="ed-table-bottom ed_delete_border" @click="deleteCode(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </ApiTable>
            </el-col>
        </el-row>

        <EdDialog ref="dialogRef" v-if="dialogShow" width="490px" :title="dialogTitle" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form ref="form" :model="model" label-width="80px">
                <el-form-item label="上级类型" prop="name" v-if="!model.id">
                    <EdTreeData v-model="model.name" :treeData="treeData" highlight-current :treeProps="defaultProps" @onclick="treeDataClick"></EdTreeData>
                </el-form-item>

                <el-form-item label="类型名称" prop="dictName" :rules="$validate.validates({required:true,msg:'类型名称'})">
                    <el-input v-model="model.dictName" placeholder="类型名称"></el-input>
                </el-form-item>

               <el-form-item label="类型code" prop="dictType" :rules="$validate.validates({required:true,msg:'类型code'})">
                    <el-input v-model="model.dictType" placeholder="类型code"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="remarks">
                    <el-input type="textarea" v-model="model.remarks" placeholder="描述"></el-input>
                </el-form-item>

            </el-form>
        </EdDialog>

        <EdDialog ref="dialogRef" v-if="dialogItemShow" width="490px" :title="dialogItemTitle" @close-dialog="closeDialog1" @save-dialog="saveDialog1">
            <el-form ref="form" :model="modelItem" label-width="80px">

                <el-form-item label="字典名称" prop="label" :rules="$validate.validates({required:true,msg:'字典名称'})">
                    <el-input v-model="modelItem.label" placeholder="字典名称"></el-input>
                </el-form-item>

                <el-form-item label="字典值" prop="value" :rules="$validate.validates({required:true,msg:'字典值'})">
                    <el-input v-model="modelItem.value" placeholder="字典值"></el-input>
                </el-form-item>

                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="modelItem.sort" :min="0" placeholder="排序"></el-input-number>
                </el-form-item>

                <el-form-item label="描述" prop="remarks">
                    <el-input type="textarea" v-model="modelItem.remarks" placeholder="描述"></el-input>
                </el-form-item>

            </el-form>
        </EdDialog>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>

    </el-card>
</template>

<script>

    import EdTable from "src/components/EdTable.vue";
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from "src/components/EdSelect.vue";
    import EdDialog from 'src/components/EdDialog.vue'
    import {dictAdd ,listAll ,dictAddItem ,dictListItem ,delItem ,editItem ,dictEdit ,dictDel ,getDictByCode} from "src/api/dictionaries";
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import EdTreeData from "../../../components/EdTreeData.vue";
    export default {
        name: 'index',
        components: {
            EdTable,
            EdSelect,
            EdDialog,
            ApiTable,
            EdConfirmDelete,
            EdTreeData
        },
        data() {
            return {
                cascader:[],
                treeData: [],
                defaultProps: {
                    parent: 'parentCodeId',   // 父级唯一标识
                    value: 'id',          // 唯一标识
                    label: 'dictName',
                    defaultPid: null,
                },
                queryForm: {
                    id: ''
                },
                model: {
                    parentId: '',
                    dictType: '',
                    dictName:'',
                },
                modelItem: {
                    dictId:"",
                    dictType:"",
                    label: '',
                    value: '',
                    remarks:'',
                    sort:0,
                },
                dialogTitle: "",
                dialogItemTitle: "",
                dialogShow: false,
                dialogItemShow: false,

                itemData:{},
                confirmRow:{},
                type:""
            }
        },
        mounted(){

        },
        created() {
            this.queryTreeData();

            // 获取字典值方式
            // getDictByCode("type").then(response => {
            //     if(response.code == 20000) {
            
            //     }
            // })
        },
        methods: {
            load:dictListItem,
            queryTreeData() {
                listAll().then((res) => {
                    this.treeData = res.data;
                })
            },
            clickCodeType(data) {
                this.itemData = data;
                this.queryForm.id = data.id;
                this.$refs.table.load(1);
            },
            treeDataClick(data){
                this.model.name = data.dictName
                this.model.parentId = data.id
            },
            formClearValidate() {
                this.$nextTick(() => {
                    if (this.$refs.form) {
                        this.$refs.form.clearValidate()
                    }
                });
            },
            addCodeType() {
                this.model = {
                    parentId: '',
                    dictType: '',
                    dictName:'',
                }
                this.formClearValidate();
                this.dialogTitle = "新增字典类型";
                this.dialogShow = true;
            },
            closeDialog(){
                this.dialogShow = false;
            },
            saveDialog(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if(this.model.id){
                            this.dictEdit()
                        }else {
                            this.dictAdd()
                        }
                    }
                })
            },
            dictAdd(){
                dictAdd(this.model).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '新增字典类型成功！',
                            duration: 2000,
                            center:true
                        });
                        this.dialogShow = false;
                        this.$nextTick(()=>{
                            this.queryTreeData()
                        })
                    }
                })
            },
            dictEdit(){
                dictEdit(this.model).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '修改字典类型成功！',
                            duration: 2000,
                            center:true
                        });
                        this.dialogShow = false;
                        this.$nextTick(()=>{
                            this.queryTreeData()
                        })
                    }
                })
            },
            updateCodeType() {
                if(JSON.stringify(this.itemData) == "{}"){
                    this.$message.info({
                        message:"请点击修改的字典类型",
                        duration: 2000,
                        center:true
                    })
                }else {
                    this.formClearValidate();
                    this.dialogTitle = "编辑字典类型";
                    this.dialogShow = true;
                    this.model = this.itemData;
                }

            },
            deleteCodeType(){
                this.type = "字典类型";
                this.$refs.confirmDeleteRef.open()
            },
            deleteCode(row) {
                this.confirmRow = row;
                this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            confirmDeleteTrue(){
                if(this.type == "字典类型"){
                    dictDel({id: this.itemData.id}).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '字典类型已删除成功！',
                                duration: 2000,
                                center:true
                            });
                            this.queryTreeData();
                        }
                    })
                }else {
                    delItem({id: this.confirmRow.id}).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '字典值已删除成功！',
                                duration: 2000,
                                center:true
                            });
                            this.$refs.table.load(1)
                        }
                    })
                }
            },
            addCode() {
                if(JSON.stringify(this.itemData) == "{}"){
                    this.$message.info({
                        message:"请点击添加字典值的字典类型",
                        duration: 2000,
                        center:true
                    })
                } else if(this.itemData && this.itemData.children && this.itemData.children.length > 0){
                    this.$message.info({
                        message:"存在下级字典类型的无法字典类型不能新增字典值",
                        duration: 2000,
                        center:true
                    })
                } else {
                    this.formClearValidate();
                    this.modelItem = {
                        dictId:this.itemData.id,
                        dictType:this.itemData.dictType,
                        label: '',
                        value: '',
                        remarks:'',
                        sort:0,
                    };
                    this.dialogItemTitle = "新增字典";
                    this.dialogItemShow = true;
                }

            },
            closeDialog1(){
                this.dialogItemShow = false;
            },
            saveDialog1(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.dictItemAdd()
                    }
                })
            },
            dictItemAdd(){
                let urlFn = null;
                if(this.modelItem.id){
                    urlFn = editItem
                }else {
                    urlFn = dictAddItem
                }
                urlFn(this.modelItem).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message:this.modelItem.id ? '编辑字典成功' : '新增字典成功！',
                            duration: 2000,
                            center:true
                        });
                        this.dialogItemShow = false;
                        this.$nextTick(()=>{
                            this.$refs.table.load(1)
                        })
                    }else {
                        this.$refs.dialogRef.hideLoading()
                    }
                }).catch(()=>{
                    this.$refs.dialogRef.hideLoading()
                })
            },
            updateCode(row) {
                this.modelItem = row;
                this.dialogItemTitle = "修改字典";
                this.dialogItemShow = true;
            },
        },
    }

</script>

